<template>
  <van-count-down :time="time">
    <template v-slot="timeData">
      <div class="count_box">
        <div class="block">{{ timeData.hours }}</div>
        <div class="colon">:</div>
        <div class="block">{{ timeData.minutes }}</div>
        <div class="colon">:</div>
        <div class="block">{{ timeData.seconds }}</div>
      </div>
    </template>
  </van-count-down>
</template>

<script>
export default {
  name: "count-down",
  data() {
    return {};
  },
  props: ["time"]
};
</script>

<style lang="scss" scoped>
.count_box {
  @extend .flex;
  justify-content: flex-start;
}
.colon {
  color: rgba(255, 88, 109, 1);
  border-radius: 2px;
  font-size: 24px;
  display: flex;
  align-items: center;
  margin: 0 2px;
  height: 20px;
  position: relative;
  bottom: 3px;
}
.block {
  width: 20px;
  height: 20px;
  background: rgba(255, 88, 109, 1);
  border-radius: 2px;
  font-size: m-w(24);
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
  @extend .flex;
  justify-content: center;
}
</style>
